<template>
	<view>
		<view class="top">
		</view>
		<view class="center">
			<view class="imgBox">
				<button class="btnBox" @click="goLogin" :disabled="isDisabled">
					<image v-if="userInfo.avatar" class="btnImg" 
					:src="userInfo.avatar" mode=""></image>
					<text>请登录</text>
				</button>
			</view>
		</view>
		
		<view class="personBox">
			<navigator class="inlineBox2" url="/pages/test/test" v-for="(item, index) in imgArr" :key="index">
				<view style="width: 100rpx; height: 100rpx; border: 1rpx solid black; border-radius: 50%; margin: 0 auto;">
					<image style="display: block; width: 70rpx; height: 70rpx; margin: 0 auto; margin-top: 15rpx;" :src="item.url" mode="aspectFill"></image>
				</view>
				<view style="width: 100%; height: 30rpx; text-align: center; line-height: 50rpx;">
					{{item.text}}
				</view>
			</navigator>
		</view>
		<view>&nbsp;</view>
		<view class="foot">
			<navigator class="box3" url="/pages/test/test" v-for="(item, index) in iconArr" :key="index">
				<image :src="item.url" mode="aspectFit"></image>
				<text>{{item.text}}</text>
				<view class="icon">></view>
			</navigator>
		</view>
		
		<!-- 弹出框 -->
		<view v-if="!isHidden">
			<view class="popBox">
				<view class="popCenter">
					<view style="text-align: center;font-size: 50rpx;
					font-weight: 700; margin-top: 20rpx;">授权登录</view>
					<button class="btnAvt" 
					open-type="chooseAvatar" @chooseavatar="getAvatar">
						<image v-if="avatar" :src="avatar" mode="aspectFit"></image>
						<view v-else>获取头像</view>
					</button>
					<input v-if="nickname" :value="nickname" type="nickname" @blur="getName" placeholder="请输入名称"/>
					<input v-else type="nickname" @blur="getName" placeholder="请输入昵称"/>
					<view class="btnSelect">
						<button @click="back">取消</button>
						<button @click="confirm">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			let userTmp = uni.getStorageSync('userInfo')
			if(userTmp) {
				this.userInfo = userTmp
				console.log(this.userInfo.nickname + '获取成功')
				this.isHidden = true
				this.isDisabled = true
			}
		},
		data() {
			return {
				isHidden: true,
				isDisabled: false,
				avatar: '',
				nickname: '',
				userInfo: {
					avatar: '',
					nickname: ''
				},
				imgArr: [
					{url: "/static/邮箱 (2).png", text: "我的消息"},
					{url: "/static/点赞.png", text: "我的点赞"},
					{url: "/static/我.png", text: "@我"},
					{url: "/static/收藏.png", text: "收藏"}
				],
				iconArr: [
					{url: "/static/卡券.png", text: "社区公告"},
					{url: "/static/卡券.png", text: "使用技巧"},
					{url: "/static/锁.png", text: "安全提示"},
					{url: "/static/设置.png", text: "设置"}
				],
			}
		},
		methods: {
			goLogin(){
				console.log(111)
				this.isHidden = false
			},
			getAvatar(e){
				console.log(e.detail.avatarUrl)
				this.avatar = e.detail.avatarUrl
			},
			getName(e){
				console.log(e.detail.value)
				this.nickname = e.detail.value
			},
			back(){
				this.isHidden = true
				this.avatar = ""
				this.nickname = ""
			},
			confirm(){
				if(!this.avatar) {
					uni.showToast({
						title: "头像未设置",
						icon: "error"
					})
					return
				}
				if(!this.nickname) {
					uni.showToast({
						title: "昵称未设置",
						icon: "error"
					})
					return
				}
				this.userInfo.avatar = this.avatar
				this.userInfo.nickname = this.nickname
				uni.setStorageSync('userInfo', this.userInfo)
				this.isHidden = true
				this.isDisabled = true
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 240rpx;
		background-color: #c00F0F;
	}
	.center {
		position: relative;
		top: -15px;
		width: 100%;
		height: 175rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		.imgBox {
			position: relative;
			top: -50px;
			width: 240rpx;
			height: 240rpx;
			border-radius: 40%;
			background-color: rgb(235, 235, 235);
			margin: 0 auto;
			padding: 10rpx;
			.btnBox {
				width: 240rpx;
				height: 240rpx;
				border-radius: 40%;
				margin: 0;
				padding: 0;
				background-color: gainsboro;
				.btnImg {
					width: 240rpx;
					height: 240rpx;
					border-radius: 40%;
					background-color: gainsboro;
				}
				text {
					text-align: center;
					line-height: 220rpx;
					font-size: 60rpx;
				}
			}
		}
	}
	.popBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		.popCenter {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			border-radius: 10% 10% 0 0;
			background-color: white;
			.btnAvt {
				width: 200rpx;
				height: 200rpx;
				background-color: gainsboro;
				text-align: center;
				line-height: 200rpx;
				border-radius: 50%;
				padding: 0;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			input {
				width: 300rpx;
				height: 50rpx;
				margin: 0 auto;
				border: 1px solid gray;
				margin-top: 20rpx;
				text-align: center;
				line-height: 50rpx;
			}
			.btnSelect {
				display: flex;
				button {
					width: 150rpx;
					border: 1rpx solid gray;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					font-size: 22rpx;
				}
			}
		}
	}
	.personBox {
		width: 100%;
		height: 160rpx;
		background-color: #FFFFFF;
		// background-color: cadetblue;
	}
	.inlineBox2 {
		display: inline-block;
		width: 130rpx;
		height: 100%;
		// background-color: beige;
		margin-left: 46rpx;
	}
	.foot {
		width: 100%;
		background-color: #FFFFFF;
		// background-color: aliceblue;
		.box3 {
			width: 100%;
			height: 80rpx;
			padding: 10rpx;
			// background-color: skyblue;
			image {
				float: left;
				width: 50rpx;
				height: 100%;
				padding: 0 20rpx;
				border-radius: 50%;
			}
			text {
				line-height: 80rpx;
				font-size: 40rpx;
			}
			.icon {
				float: right;
				width: 100rpx;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>
